<template>
  <div class="speech-container">
    <fm-nav-bar
      title="语音识别"
      :border="false"
      left-arrow
      @click-left="back"
    />
    <div class="speech-box">
      <div class="speech-box3" v-if="result && state != '-1'">
        <div class="speech-result">
          {{ result }}
        </div>
      </div>
      <div class="speech-box1" v-else>
        <div v-if="state == '-1'">
          <fm-image
            width="96px"
            height="96px"
            fit="contain"
            :src="require('@assets/img/plugin/recognition_failed.png')"
          />
          <div class="failed-name">识别出错</div>
        </div>
        <div v-else class="speech-tips">{{ tips }}</div>
      </div>
      <div class="speech-box2">
        <div class="speech-time">
          {{ time_filter ? time_filter : '' }}
        </div>
        <div class="text">
          <div class="speech-icon">
            <fm-image
              v-if="operate == 'record'"
              width="80px"
              height="80px"
              fit="contain"
              :src="require('@assets/img/plugin/record.png')"
              @click="startRecorder"
            />
            <fm-image
              v-if="operate == 'recording'"
              width="80px"
              height="80px"
              fit="contain"
              :src="require('@assets/img/plugin/quit.png')"
              @click="stopRecorder"
            />
            <fm-image
              v-if="operate == 'recognition'"
              width="80px"
              height="80px"
              fit="contain"
              :src="require('@assets/img/plugin/recognition.png')"
              @click="startRecorder"
            />
          </div>
          <div class="speech-title" @click="startRecorder">
            <span v-if="operate == 'recognition'"> 重新录音 </span>
            <!-- <span> 重新录音 </span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'fawkes-mobile-lib'
export default {
  name: 'SpeechRecognizer',
  data() {
    return {
      tips: '',
      operate: 'record',
      result: '', //识别结果
      state: '', //识别状态标识
      status: '', //识别状态
      volume: '', //识别音量
      time_num: 0,
      timer: null,
    }
  },
  computed: {
    // 计时器拆分
    time_filter() {
      var time_num = this.time_num * 50
      let minute =
        Math.floor((time_num / 1000 / 60) % 60) < 10
          ? '0' + Math.floor((time_num / 1000 / 60) % 60)
          : Math.floor((time_num / 1000 / 60) % 60)
      let second =
        Math.floor((time_num / 1000) % 60) < 10
          ? '0' + Math.floor((time_num / 1000) % 60)
          : Math.floor((time_num / 1000) % 60)
      let m_second =
        time_num % 1000 < 10
          ? '0' + (time_num % 1000).toString().slice(0, 2)
          : (time_num % 1000).toString().slice(0, 2)
      let str = minute + ':' + second + '.' + m_second
      return str
    },
  },
  watch: {
    time_num(val) {
      if (Math.floor(((val * 50) / 1000 / 60) % 60) == 1) {
        clearTimeout(this.timer)
        this.timer = null
        Toast('语音识别为60秒,超时自动结束录音')
        this.operate = 'recognition'
      }
    },
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    startRecorder() {
      this.time_num = 0
      this.timer = setInterval((_) => {
        this.time_num += 1
      }, 50)
      this.tips = '识别中，请稍后'
      this.operate = 'recording'
      if (typeof yuanchu != 'undefined') {
        yuanchu?.speechRecognizer?.startRecord(
          [],
          (res) => {
            if (res) {
              this.status = res.status
              if (res.state === '0') {
                this.state = res.state
                this.volume = res.volume
                this.result = res.string
              } else if (res.state === '1') {
                this.state = res.state
                this.volume = res.volume
                this.result = res.string
                this.operate = 'recognition'
                clearTimeout(this.timer)
                this.timer = null
              }
            }
          },
          (err) => {
            console.log('err', err)
            if (err) {
              this.state = err.state
              this.status = err.status
              this.volume = err.volume
            }
          }
        )
      }
    },
    stopRecorder() {
      clearTimeout(this.timer)
      this.timer = null
      this.operate = 'recognition'
      this.tips = ''
      if (typeof yuanchu != 'undefined') {
        yuanchu?.speechRecognizer?.stopRecord(
          (res) => {
            if (res) {
              this.status = res.status
              this.volume = res.volume
            }
          },
          (err) => {
            console.log('err', err)
          }
        )
      }
    },
    // handleRecond() {
    //   this.operate = 'record'
    //   this.tips = '点击下方录音按钮，开始语音识别'
    //   this.result = ''
    //   this.state = ''
    //   this.status = ''
    //   this.volume = ''
    // },
  },
  mounted() {
    this.tips = '点击下方录音按钮，开始语音识别'
    //初始化语音识别控件
    if (typeof yuanchu != 'undefined') {
      yuanchu.speechRecognizer.configIFlyAppID('1b4ced69')
    }
  },
}
</script>
<style lang="less" scoped>
.speech-container {
  height: 100%;
  background: #f2f3f5;
}
.speech-box {
  height: calc(100% - 46px);
  .speech-box1 {
    height: 65%;
    margin: 24px 0;
    background: #ffffff;
    border-radius: 0px 0px 16px 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .speech-tips {
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #b5b9be;
      line-height: 44px;
    }
  }
  .speech-box3 {
    height: 65%;
    margin: 24px 0;
    background: #ffffff;
    border-radius: 0px 0px 16px 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .speech-result {
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #727478;
      line-height: 44px;
      margin: 48px 64px;
    }
  }
  .speech-box2 {
    height: 31%;
    background: #ffffff;
    border-radius: 16px 16px 0px 0px;
    text-align: center;
    // display: flex;
    // flex-direction: row;
    // justify-content: center;
    // align-items: center;
    // flex-direction: column;
    .speech-icon {
      text-align: center;
      // margin-top: 24px;
      height: 160px;
      width: 160px;
      // background: #4545d1;
      // border-radius: 80px;
      // display: flex;
      // flex-direction: row;
      // justify-content: center;
      // align-items: center;
    }
    .speech-time {
      text-align: center;
      padding: 24px;
      font-size: 36px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #727478;
      line-height: 50px;
      letter-spacing: 1px;
    }
  }
  .speech-title {
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #727478;
    line-height: 40px;
    margin-top: 24px;
  }
}

.failed-name {
  text-align: center;
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #727478;
  line-height: 40px;
}
.text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
